<template>
  <div class="nav-tab">
    <div
      class="nav-item-bg rounded-lg cursor-pointer mr-2"
      v-for="(item, index) in cacheRoute"
      :key="item.url"
      :class="[$route.path === item.url ? 'actived' : '']"
      @contextmenu.prevent="mouseclick(index)"
      @click="clickTab(index)"
    >
      <router-link :to="item.url">{{ item.name }}</router-link>
      <span class="close-btn-wrapper">
        <i
          icon="XCircleIcon"
          class="el-icon-circle-close cursor-pointer h-4 w-4 closeIcon"
          @click.stop="closeTab(item, index)"
        />
      </span>
      <div class="right-click" v-if="showRight[index]">
        <div @click="handleTab('closeOther', item, index)">关闭其他</div>
        <div @click="handleTab('closeAll', item, index)">关闭所有</div>
        <div @click="handleTab('refreshCurrent', item, index)">刷新页面</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  data() {
    return {
      showIndex: "",
      //最多打开10个tab
      showRight: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ],
    };
  },
  computed: {
    cacheRoute() {
      return this.$store.state.cacheRoute;
    },
  },
  methods: {
    clickOther(e) {
      console.log(e.target)
      this.$set(this.showRight, this.showIndex, false);
    },
    //右键点击tab
    mouseclick(index) {
      this.showRight.forEach((item, i) => {
        this.showRight[i] = false;
      });
      this.showIndex = index;
      this.$set(this.showRight, index, true);
    },
    //左键点击tab
    clickTab() {
      this.showRight.forEach((item, index) => {
        this.showRight[index] = false;
        this.$set(this.showRight, index, false);
      });
    },
    closeTab(item, index) {
      let currPath = location.pathname.split("?")[0];
      if (item.url && item.url !== currPath) {
        this.$router.push({ path: currPath });
      } else {
        if (index > 0) {
          this.$router.push({ path: this.cacheRoute[index - 1].url });
        } else {
          //至少保留一个页面
          return;
        }
      }
      this.$store.dispatch("deleteCacheRoute", item);
    },
    handleTab(type, item, index) {
      if (type == "closeOther") {
        this.$store.dispatch("deleteCacheRouteAll");
        this.$store.dispatch("addCacheRoute", {
          name: item.name,
          url: item.url,
        });
      } else if (type == "closeAll") {
        this.$store.dispatch("deleteCacheRouteAll");
      } else if (type == "refreshCurrent") {
        const nowPath = this.$route.path;
        this.reload();
      }
    },
  },
  mounted() {
    window.addEventListener("click", this.clickOther);
  },
};
</script>
<style lang="scss" scoped>
.nav-tab {
  // z-index: 99999;
  position: relative;
  display: flex;
  font-size: 12px;
  .nav-item-bg {
    text-align: center;
    position: relative;
    background-color: #acb6c2;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 2px;
    margin-right: 2px;
    a {
      display: inline-block;
      width: 75px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      text-decoration: none;
    }
    .close-btn-wrapper {
      cursor: pointer;
      color: red;
      position: absolute;
      top: -8px;
      .closeIcon {
        font-size: 10px;
      }
    }
  }
  .actived {
    background-color: #409eff;
  }
  .right-click {
    position: absolute;
    width: 70px;
    height: 85px;
    z-index: 100;
    background: #fff;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    text-align: center;
    padding: 5px 0;
    margin-top: 5px;
    > div {
      height: 25px;
      line-height: 25px;
      cursor: pointer;
    }
    > div:hover {
      background: #f2f7f8;
    }
  }
}
</style>
